import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    // 自动引入饿了吗组件
    AutoImport({
      resolvers: [ElementPlusResolver({
        importStyle: "sass"
      })]
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: "sass"
      })]
    }),
    // 解决ElMessage、ElLoading等样式引入问题
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            return `element-plus/theme-chalk/${name}.css`
          }
        }
      ]
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')  // 路径别名
    },
    extensions: ['.js','.json','.ts']
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自定义主题色
        additionalData: `@use "@/styles/element/index.scss" as *;`
      }
    }
  }
})

